<template>
	<div id="app">
		<div class="box">
			<el-container style="height: 100%;">
				<el-header>
					<el-row>
						<el-col :span="12">
							<router-link to="/index" class="logo">后台管理系统</router-link>
						</el-col>
						<el-col :span="12" class="flex flex-row-end">
							<div style="position: relative;margin-right: 40px;">
								<el-icon class='el-icon-bell' style='font-size: 20px;'></el-icon>
								<el-badge :value="message"  style="position: absolute;top:-10px;right: -15px;" >
								</el-badge>
							</div>
							管理员{{info.name}}
						</el-col>
					</el-row>
				</el-header>
				<el-container>
					<el-aside>
						<el-menu unique-opened :default-active="activeIndex" class="el-menu-vertical-demo"
							mode="vertical" @select="handleSelect" active-text-color="#ffaf9b" text-color="#fff"
							background-color="#4A66A5" router>
							<!-- <el-menu-item index="/index">
								销售状况
							</el-menu-item> -->
							<el-menu-item index="/bookList">
								订单管理
							</el-menu-item>
							<el-submenu index="/OrdinaryMall">
								<template slot="title">
									<span>商品管理</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="/classify">商品分类</el-menu-item>
									<el-menu-item index="/OrdinaryMall">普通商品</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-submenu index="/activity">
								<template slot="title">
									<span>活动管理</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="/activity">文章管理</el-menu-item>
								</el-menu-item-group>
								<el-menu-item-group>
									<el-menu-item index="/banner">轮播图管理</el-menu-item>
								</el-menu-item-group>
								<el-menu-item-group>
									<el-menu-item index="/notice">通知管理</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							
							<el-menu-item index="/help">
								帮助中心
							</el-menu-item>
							<el-menu-item index="/kefu">
								客服中心
							</el-menu-item>
							<el-menu-item index="/user">
								用户管理
							</el-menu-item>
						</el-menu>
					</el-aside>

					<el-main>
						
							<!-- <tabs></tabs> -->
							
							<router-view></router-view>
						
						
						
					</el-main>
				</el-container>
			</el-container>
		</div>


	</div>
</template>

<script>
	import tabs from '../tabs.vue';

	export default {
		components: {
			tabs
		},
		data() {
			return {
				message:"",
				activeIndex: "/index",
				info: {
					name: ""
				}
			}
		},
		created() {
			this.activeIndex = this.$route.path;
			this.information()
			this.getmessage()
		},
		methods: {
			handleSelect(e) {

			},
			information() {
				this.axios.post("/admin/user/information").then(res => {
					this.info = res;
				}).catch(error => {

				})
			},
			getmessage(){
				setInterval(()=>{
					this.axios.post("/api/index/getMessage",{},{isHideLoad:true}).then(res => {
						this.message = res;
					}).catch(error => {
					})
				},2000)
			}
		}
	}
</script>

<style>
	.el-aside {
		width: 200px;
		background: #4A66A5;
		box-shadow: 0px 6px 8px rgba(225, 225, 225, 0.25);
		display: inline-block;
	}

	.el-header {
		background: #4A66A5;
		color: #fff;
		line-height: 60px;

	}

	.logo {

		font-weight: bold;
		color: #fff;
		font-size: 20px;

	}

	.el-submenu__title i {
		color: #fff;
	}

	.el-menu {
		border: 0;
	}

	.el-menu-item i {
		color: #fff;
	}
</style>

<!-- <style scoped lang="scss">
	/deep/ .el-menu-item .el-icon-edit {
		color:#fff;
	}
	.is-active /deep/ .el-icon-edit {
		color:red!important;
	}
</style> -->
